<template>
  <div class="child-component">
    <h2>子组件</h2>

    <!-- 显示来自父组件的内容 -->
    <div v-for="item in content" :key="item" @click="handleClick(item)">{{ item }}</div>

    <!-- 显示通过计算属性得到的内容长度 -->
    <p>内容长度: {{ contentLength }}</p>

    <!-- 显示父组件通过插槽传递的内容 -->
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const { content } = defineProps<{
  content: string[]
}>()

const emit = defineEmits<{
  (e: 'contentClicked', val: string): void
}>()
const handleClick = (val: string) => {
  emit('contentClicked', val)
}

const contentLength = computed(() => {
  return content.length
})

defineExpose({
  contentLength
})
</script>

<style lang="scss" scoped>
.child-component {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
}

.child-component div {
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.child-component div:hover {
  background-color: #f0f0f0;
}

.child-component p {
  margin-top: 10px;
  font-size: 14px;
  color: #555;
}
</style>
